<template>
	<view class="control">
		<view class="nav">
			<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
		</view>
		<view class="top">
			<image mode="widthFix"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6a34ad3e8a24a341cd3ea964c41ebf4623cdd884.png">
			</image>
			<view class="info">
				<view class="info-1">
					￥<text>{{amountFixed(amount)}}</text>
				</view>
				<view class="info-2" v-if="typetime">剩余支付时间：{{payWaitTimes}}</view>
				<view class="info-2" style="margin-left: 50rpx;" v-if="typetimes">超时付款</view>
			</view>
		</view>

		<!-- <view class="form">
			<radio-group @change='change1'>
				<label class="item flex-align" v-for="(item,index) in payList" :key="index">
					<image mode="aspectFit" :src="item.cover"></image>
					<view class="flex-between item-con">
						<text>{{item.name}}</text>
						<radio :value="index" color="#2f75fa" :checked="index == 0 ? true : false" @change="radioChange(item)" />
					</view>
				</label>
			</radio-group>
		</view> -->
		<view class="form">
			<radio-group @change='change1'>
				<label class="item flex-align" v-for="(item,index) in payList" :key="index">
					<image mode="aspectFit" :src="item.cover"></image>
					<view class="flex-between item-con">
						<text>{{item.name}}</text>
						<radio :value="index" color="#2f75fa" :checked="index == 0 ? true : false"
							@change="radioChange(item)" />
					</view>
				</label>
			</radio-group>
		</view>
		<view class="" style="margin-top: 40rpx;" v-if="list1 != ''">
			<u-swiper :list="list1" radius=0></u-swiper>
		</view>

		<view class="footer">
			<view class="btn" @click="$noMultipleClicks(href)" v-if="btn_if">确认支付¥{{amountFixed(amount)}}</view>
			<view class="btn_t" v-else>确认支付¥{{amountFixed(amount)}}</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue"
	const venues = require("@/api/venues/venues.js")
	const person = require("@/api/personal/index.js");
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				noClick: true,
				btn_if: true, //支付按钮切换
				list1: [],
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '收银台',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				amount: '0.00',
				// payWaitTimes: '23:12:11',
				payWaitTimes: '',
				venue_id: '',
				payList: [],
				payChoose: {},
				order_id: '',
				orderid: '',
				amountValue: '',
				project: '',
				order_type: '',
				classNum: 0,
				goods_id: '',
				timer: null, //重复执行
				typetime: true,
				typetimes: false,
				belong: "",
				payWait: null,
			}
		},
		// watch:{
		// 	payChoose:{
		// 		handler(newName, oldName) {
		// 		            console.log(newName,'new')
		// 		        },
		// 		        immediate: true,
		// 		        deep: true
		// 	}
		// },
		onLoad(options) {
			console.log(options, '885')
			if (options.train_price != 'undefined') {
				this.amount = options?.train_price
			}
			// if (options.payWaitTime == 'null') {
			// 	this.payWaitTimes = '00:02:00'
			// } else {
			// 	this.payWaitTimes = options.payWaitTime
			// }
			// this.payWaitTimes = options.payWaitTime
			this.getChannelBanner()
			this.goods_id = options.goods_id
			this.belong = options.belong
			this.order_id = options.order_id
			this.orderid = options.orderid
			this.amountValue = options.amountValue
			this.project = options.project
			this.order_type = options.order_type
			this.classNum = options?.classNum
			this.amount = options.amount
			this.venue_id = options.venue_id
			this.typetime = options.typetime
			this.chaoshitype = options.chaoshitype
			this.paytime()
			// if (options.typetime == 1) {
			// 	this.typetime = false
			// 	this.typetimes = true
			// } else {
			// 	if (this.amount != '') {
			// 		if (this.chaoshitype == 2) {
			// 			var payWait = setInterval(() => {
			// 				// this.payWaitTime(this.payWaitTimes)
			// 				if (this.payWaitTimes == '00:00:00') {
			// 					clearInterval(payWait)
			// 					// uni.navigateBack({
			// 					// 	delta: 2, //返回层数，2则上上页
			// 					// })
			// 					return uni.showToast({
			// 						title: '支付超时',
			// 						icon: 'none',
			// 						mask: true
			// 					})
			// 					uni.reLaunch({
			// 						url: '/pages/personal/personal'
			// 					})
			// 				}
			// 				if (this.payWaitTimes > '0') {
			// 					this.payWaitTime(this.payWaitTimes)
			// 				}
			// 				if (this.payWaitTimes <= 0) {
			// 					console.log(102132)
			// 					clearInterval(payWait)
			// 					uni.reLaunch({
			// 						url: '/pages/personal/personal'
			// 					})
			// 					return uni.showToast({
			// 						title: '支付超时',
			// 						icon: 'none',
			// 						mask: true
			// 					})

			// 				}
			// 			}, 1000)
			// 		} 

			// 	}
			// }


			let params = {
				venue_id: options.venue_id,
				project_id: getApp().globalData.projectId,
				appid: this.$https.weixinAppId,
				order_id: options.orderid,
				open_id: uni.getStorageSync('openid'),
			}
			venues.getVenuePay(params).then(res => {
				this.payList = res.data.payment
				this.payWaitTimes = res.data.else_time
				// this.payList = res.data
				this.payList.forEach((item, index) => {
					item.content = JSON.parse(item.content)
				})
			})
			// this.getVenuePay()
		},
		onShow() {

		},
		// 一般页面用onUnload
		onUnload() {
			let that = this;
			clearInterval(that.payWait)
			that.payWait = null;
		},
		// tabbar页面用onHide
		onHide() {
			let that = this;
			clearInterval(that.payWait)
			that.payWait = null;
		},
		methods: {
			// 金额计算保留两位小数
			amountFixed(value) {
				return parseFloat(value).toFixed(2);
			},
			paytime() {
				if (this.typetime == 1) {
					this.typetime = false
					this.typetimes = true
				} else {
					if (this.amount != '') {
						if (this.chaoshitype == 2) {
							this.payWait = setInterval(() => {
								// this.payWaitTime(this.payWaitTimes)
								if (this.payWaitTimes == '00:00:00') {
									clearInterval(this.payWait)
									// uni.navigateBack({
									// 	delta: 2, //返回层数，2则上上页
									// })
									uni.showToast({
										title: '支付超时',
										icon: 'none',
										mask: true
									})
									uni.reLaunch({
										url: '/pages/personal/personal'
									})
									return
								}
								if (this.payWaitTimes > '0') {
									this.payWaitTime(this.payWaitTimes)
								}
								if (this.payWaitTimes <= 0) {
									clearInterval(this.payWait)
									uni.reLaunch({
										url: '/pages/personal/personal'
									})
									return uni.showToast({
										title: '支付超时',
										icon: 'none',
										mask: true
									})

								}
							}, 1000)
							// this.payWait =payWait
						}

					}
				}
			},
			// 获取我的待付款订单
			async getChannelBanner() {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				};
				let res = await person.getChannelBanner(postData);
				if (res.code == 1) {
					this.list1 = res.data.result.channel_banner_pay
				}
			},
			// 获取支付方式
			async getVenuePay() {
				let params = {
					venue_id: this.venue_id,
					project_id: getApp().globalData.projectId,
					appid: this.$https.weixinAppId,
					order_id: this.orderid

				}
				let res = await venues.getVenuePay(params)
				if (res.code == 1) {
					this.payList = res.data.payment
					this.payWaitTimes = res.data.else_time
					// this.payList = res.data
					this.payList.forEach((item, index) => {
						item.content = JSON.parse(item.content)
					})
				}
			},
			// 支付等待时间动态变化
			payWaitTime(time) {
				// console.log(this.payWaitTimes,'5555')
				let arr = time.split(':')
				let hour = arr[0]
				let min = arr[1]
				let sec = arr[2]
				let sec_num = parseInt(sec)
				sec_num--
				if (sec_num < 0) {
					sec_num = 59
					min--
					if (min < 0) {
						min = 59
						hour--
						if (hour < 0) {
							hour = 23
						}
					}
				}
				sec = sec_num.toString()
				if (sec.length == 1) {
					sec = '0' + sec
				}
				min = min.toString()
				if (min.length == 1) {
					min = '0' + min
				}
				hour = hour.toString()
				if (hour.length == 1) {
					hour = '0' + hour
				}
				this.payWaitTimes = hour + ':' + min + ':' + sec
			},

			async href() {
				// 场地
				if (this.belong == "court") {
					let postData = {
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						order_id: this.orderid,
					};
					let res = await venues.checkOrderStatusBeforePay(postData);
					if (res.code == 1) {
						if (res.data.result == '') {
							// 微信
							// 支付
							let pay_id = this.payList[0].id
							this.payChoose = this.payList[0]
							for (let i = 0; i < this.payList.length; i++) {
								if (this.payList[i].checked) {
									pay_id = this.payList[i].id
									this.payChoose = this.payList[i]
									break
								}
							}
							if (pay_id == '') {
								return uni.showToast({
									title: '请选择支付方式',
									icon: 'none',
									mask: true
								})
							}
							if (this.payChoose.type == 'wechat_xcx') {
								let that = this
								let res = await venues.wxPay({
									appid: this.payChoose.content.wechat_appid,
									project_id: getApp().globalData.projectId,
									pay_id: this.payChoose.id,
									orderid: this.orderid,
									order_id: this.order_id,
									openid: uni.getStorageSync('openid'),
									amount: this.amount,
									project: this.project,
									order_type: this.order_type,
									applet_id: this.$https.applet_id,
									goods_id: this.goods_id,

								})
								let paymentData = res.data
								uni.requestPayment({
									timeStamp: paymentData.timestamp,
									nonceStr: paymentData.noncestr,
									package: paymentData.package,
									signType: 'MD5',
									paySign: paymentData.paySign,
									success: (res) => {
										this.payWait = null;
										clearInterval(this.payWait); // 清除定时器
										this.btn_if = false
										if (that.order_type == 2) {
											uni.reLaunch({
												url: '/pages/personal/card-pack/card-pack'
											})
										} else if (that.order_type == 3) {
											uni.reLaunch({
												url: '/pages_a/my-venues/my-venues'
											})
										} else if (that.order_type == 1) {
											uni.reLaunch({
												url: '/pages/personal/ticket-holder/ticket-holder'
											})
										}

									},
									fail: (res) => {
										console.log('fail:' + JSON.stringify(res));
										if (res.errMsg = 'requestPayment:fail cancel') {
											setTimeout(() => {
												uni.navigateBack({
													delta: 2, //返回层数，2则上上页
												})
											}, 500)
										}
									},
									complete: () => {
										this.loading = false;
									}
								})
							} else if (this.payChoose.type == 'sao_bei' || this.payChoose.type == 'icbc_bank') {
								let that = this
								// 扫呗
								let res = await venues.WxMiniAddOrder({
									app_id: this.$https.weixinAppId,
									project_id: getApp().globalData.projectId,
									open_id: uni.getStorageSync('openid'),
									order_type: this.order_type,
									pay_money: this.amount,
									order_number: this.order_id,
									pay_id: this.payChoose.id,
									orderid: this.orderid,
									goods_id: this.goods_id,
									venue_id: this.venue_id,
								})
								let paymentData = res.data
								uni.requestPayment({
									timeStamp: paymentData.timestamp,
									nonceStr: paymentData.noncestr,
									package: paymentData.package,
									signType: paymentData.signType,
									paySign: paymentData.paySign,
									success: (res) => {
										this.payWait = null;
										clearInterval(this.payWait); // 清除定时器
										this.btn_if = false
										if (that.order_type == 2) {
											uni.reLaunch({
												url: '/pages/personal/card-pack/card-pack'
											})
										} else if (that.order_type == 3) {
											uni.reLaunch({
												url: '/pages_a/my-venues/my-venues'
											})
										} else if (that.order_type == 1) {
											uni.reLaunch({
												url: '/pages/personal/ticket-holder/ticket-holder'
											})
										} else {
											uni.reLaunch({
												url: "/page_venues/pages/venuesDetail/pay/paySuccess?backUp=1"
											})
										}

									},
									fail: (res) => {
										console.log('fail:' + JSON.stringify(res));
										if (res.errMsg = 'requestPayment:fail cancel') {
											setTimeout(() => {
												uni.navigateBack({
													delta: 2, //返回层数，2则上上页
												})
											}, 500)
										}
									},
									complete: () => {
										this.loading = false;
									}
								})
							}
						}
					}
				} else {
					// 票卡
					console.log(2)
					// 微信
					// 支付
					let pay_id = this.payList[0].id
					this.payChoose = this.payList[0]
					for (let i = 0; i < this.payList.length; i++) {
						if (this.payList[i].checked) {
							pay_id = this.payList[i].id
							this.payChoose = this.payList[i]
							break
						}
					}
					if (pay_id == '') {
						return uni.showToast({
							title: '请选择支付方式',
							icon: 'none',
							mask: true
						})
					}
					if (this.payChoose.type == 'wechat_xcx') {
						let that = this
						let res = await venues.wxPay({
							appid: this.payChoose.content.wechat_appid,
							project_id: getApp().globalData.projectId,
							pay_id: this.payChoose.id,
							orderid: this.orderid,
							order_id: this.order_id,
							openid: uni.getStorageSync('openid'),
							amount: this.amount,
							project: this.project,
							order_type: this.order_type,
							applet_id: this.$https.applet_id,
							goods_id: this.goods_id
						})
						let paymentData = res.data
						uni.requestPayment({
							timeStamp: paymentData.timestamp,
							nonceStr: paymentData.noncestr,
							package: paymentData.package,
							signType: 'MD5',
							paySign: paymentData.paySign,
							success: (res) => {
								this.payWait = null;
								clearInterval(this.payWait); // 清除定时器
								this.btn_if = false
								if (that.order_type == 2) {
									uni.reLaunch({
										url: '/pages/personal/card-pack/card-pack'
									})
								} else if (that.order_type == 3) {
									uni.reLaunch({
										url: '/pages_a/my-venues/my-venues'
									})
								} else if (that.order_type == 1) {
									uni.reLaunch({
										url: '/pages/personal/ticket-holder/ticket-holder'
									})
								}
							},
							fail: (res) => {
								console.log('fail:' + JSON.stringify(res));
								if (res.errMsg = 'requestPayment:fail cancel') {
									uni.showModal({
										title: '提示',
										// 提示文字
										content: '是否进行支付？',
										// 取消按钮的文字自定义
										cancelText: "取消支付",
										// 确认按钮的文字自定义
										confirmText: "继续支付",
										//删除字体的颜色
										confirmColor: '#000000',
										//取消字体的颜色
										cancelColor: '#999',
										success: function(res) {
											if (res.confirm) {
												// 执行确认后的操作

											} else {
												console.log(9999)
												let datas = {
													app_id: that.$https.weixinAppId,
													project_id: getApp().globalData
														.projectId,
													order_id: that.orderid,
												};
												venues.cancelPay(datas).then(result => {
													// console.log(result, '787878')
													if (result.code == 1) {
														uni.reLaunch({
															url: '/pages/personal/orders/orders?tab=1'
														})
													}
												})

											}
										}
									})
								}
							},
							complete: () => {
								this.loading = false;
							}
						})
					} else if (this.payChoose.type == 'sao_bei' || this.payChoose.type == 'icbc_bank') {
						let that = this
						// 扫呗
						let res = await venues.WxMiniAddOrder({
							app_id: this.$https.weixinAppId,
							project_id: getApp().globalData.projectId,
							open_id: uni.getStorageSync('openid'),
							order_type: this.order_type,
							pay_money: this.amount,
							order_number: this.order_id,
							pay_id: this.payChoose.id,
							orderid: this.orderid,
							goods_id: this.goods_id,
							venue_id: this.venue_id,
						})
						let paymentData = res.data
						uni.requestPayment({
							timeStamp: paymentData.timestamp,
							nonceStr: paymentData.noncestr,
							package: paymentData.package,
							signType: paymentData.signType,
							paySign: paymentData.paySign,
							success: (res) => {
								this.payWait = null;
								clearInterval(this.payWait); // 清除定时器
								this.btn_if = false
								if (that.order_type == 2) {
									uni.reLaunch({
										url: '/pages/personal/card-pack/card-pack'
									})
								} else if (that.order_type == 3) {
									uni.reLaunch({
										url: '/pages_a/my-venues/my-venues'
									})
								} else if (that.order_type == 1) {
									uni.reLaunch({
										url: '/pages/personal/ticket-holder/ticket-holder'
									})
								} else {
									uni.reLaunch({
										url: "/page_venues/pages/venuesDetail/pay/paySuccess?backUp=1"
									})
								}

							},
							fail: (res) => {
								console.log('fail:' + JSON.stringify(res));
								if (res.errMsg = 'requestPayment:fail cancel') {
									uni.showModal({
										title: '提示',
										// 提示文字
										content: '是否进行支付？',
										// 取消按钮的文字自定义
										cancelText: "取消支付",
										// 确认按钮的文字自定义
										confirmText: "继续支付",
										//删除字体的颜色
										confirmColor: '#000000',
										//取消字体的颜色
										cancelColor: '#999',
										success: function(res) {
											if (res.confirm) {
												// 执行确认后的操作

											} else {
												// 执行取消后的操作
												let datas = {
													app_id: that.$https.weixinAppId,
													project_id: getApp().globalData
														.projectId,
													order_id: that.orderid,
												};
												venues.cancelPay(datas).then(result => {
													// console.log(result, '787878')
													if (result.code == 1) {
														uni.reLaunch({
															url: '/pages/personal/orders/orders?tab=1'
														})
													}
												})
											}
										}
									})
								}
							},
							complete: () => {
								this.loading = false;
							}
						})
					} else if (this.payChoose.type == 'free') {
						let that = this
						that.enterSuccess()
					}

				}
			},
			// 免费次数调用
			async enterSuccess() {
				var nowdate = new Date().valueOf();
				var that = this;
				let params = {
					open_id: uni.getStorageSync("openid"),
					project_id: getApp().globalData.projectId,
					app_id: that.$https.weixinAppId,
					out_trade_no: this.order_id,
					goods_id: this.goods_id,
					transaction_id: 'ZF001',
					add_time: nowdate,
					order_type: this.order_type,
					attach: this.projectArr,
					payer_total: that.amount,
					from: 'yePay',
					card_id: this.card_id,
					coupon_id: this.coupon_id,
					pay_type: 'free'
				};
				let res = await venues.moniPay(params);
				if (res.code == 1) {
					uni.showToast({
						title: '支付成功',
						icon: 'none',
						mask: true
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/page_venues/pages/venuesDetail/pay/paySuccess?backUp=1"
						})
					}, 500)

				} else {
					uni.showToast({
						title: res.info,
						icon: 'none',
						mask: true
					})
				}
			},
			change1(e) {
				let that = this
				let i = e.detail.value
				const item = this.payList[i]
				if (item) {
					this.payChoose = item
					this.payList[i].checked = true
				} else {
					this.payChoose = {}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background: #F3F3F3;

		.top {
			position: relative;

			>image {
				width: 100%;
			}

			.info {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				top: 0;
				width: fit-content;
				height: fit-content;
				bottom: 0;

				.info-1 {
					font-size: 40rpx;
					color: #FFFFFF;
					text-align: center;

					text {
						font-size: 55rpx;
						font-weight: bold;
						font-family: DIN-Bold;
					}
				}

				.info-2 {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 20rpx;
				}
			}
		}

		.nav {
			position: absolute;
			top: 0;
			z-index: 3;
			width: 100%;
		}

		.form {
			box-sizing: border-box;

			.item {
				padding: 0rpx 30rpx;
				background-color: white;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}

				.item-con {
					flex: 1;
					width: 0;
					font-size: 26rpx;
					padding: 40rpx 0;
					color: #333333;
					border-bottom: 1px solid #EFEFEF;

					.pirce {
						color: #888888;
					}
				}

				radio {
					transform: scale(0.8);
				}
			}
		}

		.footer {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx;
			background-color: white;

			.btn {
				text-align: center;
				width: 100%;
				padding: 22rpx 0;
				background: linear-gradient(0deg, #FC484C, #F72746);
				border-radius: 19px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.btn_t {
				text-align: center;
				width: 100%;
				padding: 22rpx 0;
				background: linear-gradient(0deg, #b6b6b6, #b6b6b6);
				border-radius: 19px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>